{% extends "base.html" %}

{% block headerext %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<style type="text/css">
	ul.feedItems span, ul.feedItems a { padding-right: 5px; }
	div#selectedItems ul.feedItems { width: 100%; min-height: 300px; border:1px solid; background-color: #DDD; -moz-border-radius: 4px; border-radius: 4px; -web-border-radius: 4px; }
	ul { list-style-type: none; margin: 0; } 
	li { list-style-type: none; margin: 0;}
	#accordion {
		border:1px solid; background-color: #DDD; -moz-border-radius: 4px; border-radius: 4px; -web-border-radius: 4px;	
	}
	#accordion h3 { 
		background-color: #EFEFEF;
		margin-bottom: 2px;
		padding: 3px;
	}
</style>
{% endblock %}

{% block bodyblock %}
	<div class="span-12">
		<h2>Found Feed Items</h2>
		<div id="accordion">
		{% for feed in feeds %}
		<h3>{{ feed.name }}</h3>
		<div>
			<div class="feedList" style="margin-bottom: 20px">
				<ul class="feedItems" url="{{feed.url}}">Checking Feed URL</ul>
			</div>
		</div>	
		{% endfor %}
		</div>
	</div>
	<script type="text/javascript">
	<!--
		var handleClick = function(obj,v) {
			var o = $(obj); 
			/* this will put it back at the bottom, but meh. */ 
			if(o.hasClass('selectedItem')) 
			{
				o.removeClass('selectedItem').parent().appendTo(o.data('originalParent'));
			} else { 
				o.data('originalParent',o.parent().parent()); 
				o.addClass('selectedItem').html('Remove').parent().appendTo($('#selectedItems ul.feedItems'))
			}
		};
	
		$(function() { 
			$('ul.feedItems').each(function() {
				var d = $(this); 
				if(d.attr('url')!=null)
				{
					d.html('Loading... <img src="images/loading.gif" />')
					$.get('/posts',{url: d.attr('url')},function(data){ 
						d.html('');
						try {
							$.each(data.feed,function(i,v)
							{
								var i = $('<li/>').addClass('item').data('entry',v); 
								var t = $('<span/>').addClass('title').html(v.title).appendTo(i);
								var l = $('<a/>').attr('href',v.link).html('View').appendTo(i); 

								i.appendTo(d);
							}); 
						} catch (e) { console.log(e); }
					},'json');
				} else { 
					if(d.parent().hasClass('feedList'))
						d.html('Sorry, there was a problem with the saved URL')
				}
			});
		}); 
	//-->
	</script>

	<div class="span-12 last">
		<h2>Selected Feed Items</h2>
	    <form id="form" action="/add" method="post">
	      <div><label for="name">Email Name: </label><input type="text" name="name" value=""/>
	      <input type="submit" value="Save or Load"></div>
	    </form>
	
		<div id="selectedItems">
			<ul class="feedItems">
			</ul>
		</div>
	</div>

	<script type="text/javascript">
	<!--
		$(function() {
			$('ul.feedItems').sortable({connectWith: 'ul.feedItems'}).droppable(); 
			$('#accordion h3').click(function() {
				$(this).next().toggle('slow');
				return false;
			}).next().hide();
		});
	//-->
	</script>
{% endblock %}